<template>
  <div>
    <a-card :bordered="false" title="权限详情">
      <a-form :form="form" class="form">
        <a-row class="form-row">
          <a-col :lg="10" :md="10" :sm="24">
            <a-form-item label="权限名称">
              <a-input
                placeholder="权限名称"
                v-decorator="[
                  'name',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入权限名称',
                        trigger: 'blur',
                      },
                      { max: 255, message: '不得超过255个字符' },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col
            :xl="{ span: 12, offset: 2 }"
            :lg="{ span: 12 }"
            :md="{ span: 24 }"
            :sm="24"
          >
            <a-form-model-item label="权限备注">
              <a-input
                type="textarea"
                v-decorator="['remark']"
                placeholder="权限备注"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card
      class="card"
      :title="'权限分配'"
      :loading="loading1"
      :bordered="false"
      style="margin-top: 20px"
    >
      <div style="margin-bottom: 25px">
        <a-row class="topRow">
          <a-button type="primary" @click="$refs.tree.openAll()"
            >全部展开</a-button
          >

          <a-button type="primary" @click="$refs.tree.closeAll()"
            >全部折叠</a-button
          >
          <a-button type="primary" @click="$refs.tree.selAll()">全选</a-button>
          <a-button type="primary" @click="$refs.tree.clearAll()"
            >清空</a-button
          >
        </a-row>
      </div>

      <tree-index
        ref="tree"
        :TreeArray="tree.treeData"
        :checkedKeysProp="tree.selectedKeys"
      ></tree-index>
    </a-card>
    <footer-tool-bar>
      <a-button type="primary" @click="validate" :loading="loading2"
        >提交</a-button
      >
    </footer-tool-bar>
  </div>
</template>

<script>
import {
  //   teachingGoupBy,
  //   teachingAdd,
  roleAdd,
  permission,
} from "@/services/role";
// import FormEdit from "@/components/form/FormEdit";
import FooterToolBar from "@/components/tool/FooterToolBar";
import TreeIndex from "@/components/permissionstree/index";
// import TestClose from '@/utils/test'
// import TestClose from '@/main'

export default {
  name: "TeachingAdd",
  //   i18n: require('../i18n'),
  components: {
    // CollectionCreateForm: CollectionCreateForm,
    FooterToolBar: FooterToolBar,
    TreeIndex,
    // FormEdit: FormEdit,
  },
  data() {
    return {
      //   phoneMessageColumns: phoneMessageColumns,
      //   annalsPhoneColumn: annalsPhoneColumn,
      //   annalsEmailColumn: annalsEmailColumn,
      // phoneMessage: [],
      // dataSource:dataSource,
      // columns:columns,
      //   groupList: [],
      form: this.$form.createForm(this),
      //   visible: false,
      loading1: false, //权限树
      loading2: false, //提交
      title: "",
      tree: {
        selectedKeys: [], //所有id
        treeData: [],     //树结构
      },
    };
  },
  created() {
    // this.closeTabs.$emit('test','msg');
    this.permissionLoad();
  },
  watch: {},
  methods: {
    validate() {
      // alert()

      //  let
      // console.log();
      //   console.log(tree.checkedKeys);
      const { form, $message, $refs, $router } = this;
      let this_ = this;
      form.validateFields((err) => {
        if (err) {
          $message.error("信息填写有误");
          return;
        } else {
          // console.log(form.getFieldsValue());

          this.$confirm({
            title: "确定要添加吗?",
            // content: h => <div style="color:red;">Some descriptions</div>,
            async onOk() {
              this_.loading2 = true;
              let formData = form.getFieldsValue();

              formData["column_id"] = $refs.tree.getData();
              formData["permission_id"] = $refs.tree.getOperation();

              formData["column_id"] = formData["column_id"] && formData["column_id"].length > 0? formData["column_id"].join(","):''
              formData["permission_id"] = formData["permission_id"] && formData["permission_id"].length > 0? formData["permission_id"].join(","):''

             

              let res = await roleAdd({ formData: formData });
              if (res.code == 200) {
                $message.success(res.message);
              }
              this_.loading2 = false;

              this_.closeTabs.$emit("closeTabs");
              $router.push("/personnelManagement/roleList");
              // to: "/enterpriseManagement/teachingCulture",
            },
          });
        }
      });
    },
    async permissionLoad() {
      this.loading1 = true;
      let res = await permission();
      if (res.code == 200) {
        const { column_last, checkedKeys } = res.data;
        this.tree.treeData = column_last;     //树形数据
        this.tree.selectedKeys = checkedKeys; //所有id
      }
      this.loading1 = false;
    },
  },
};
</script>

<style scoped lang="less">
.aSelect {
  display: flex;
  width: 100%;
  justify-content: space-between;
  /* border: 1px solid red; */
  align-items: center;
}

.card {
  margin-bottom: 24px;
}

.form {
  .form-row {
    margin: 0 -8px;
    //    display: flex;
    // justify-content: space-between;
  }
  .ant-col-md-12,
  .ant-col-sm-24,
  .ant-col-lg-6,
  .ant-col-lg-8,
  .ant-col-lg-10,
  .ant-col-xl-8,
  .ant-col-xl-6 {
    padding: 0 8px;
  }
}
.topRow button {
  margin-top: 5px;
  margin-left: 10px;
}
</style>
